<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        @submit="handleSearch"
        @reset="handleReset"
      >
        <Button
          style="display: inline-block;"
          @click="handleExport"
        >导出</Button>
      </FilterForm>
    </Container>
    <Container height="fill" :scroll-y="true" display="flexY">
      <OperationContainer style="margin-bottom: 10px">
        <!-- <Button style="margin-right: 12px" @click="actionUnfoldFunc(true)"
          >导出</Button
        > -->
      </OperationContainer>
      <el-table
        ref="ctab"
        v-loading="tableLoading"
        :data="tableData"
        border
        :header-cell-style="{ background: '#fafafa', borderColor: '#e7ecf8' }"
        header-row-class-name="ck-table-header"
        row-class-name="ck-table-row"
        size="small"
        row-key="code"
        height="100%"
      >
        <el-table-column align="center" type="index" label="序号" width="50" />
        <el-table-column prop="year" label="年" />
        <el-table-column prop="month" label="月" />
        <el-table-column prop="deptCode" label="核算单元编码" />
        <el-table-column prop="deptName" label="核算单元名称" />
        <!-- <el-table-column prop="pdeptCode" label="核算定义编码" />
        <el-table-column prop="pdeptName" label="核算定义名称" /> -->
        <el-table-column prop="accountCode" label="会计分类编码" />
        <el-table-column prop="accountName" label="会计分类名称" />
        <el-table-column prop="amount" label="直接成本">
          <template slot-scope="scope">
            {{ scope.row.amount | numberToCurrency }}
          </template>
        </el-table-column>
        <el-table-column prop="adminCost" label="行政分摊成本">
          <template slot-scope="scope">
            {{ scope.row.adminCost | numberToCurrency }}
          </template>
        </el-table-column>
        <el-table-column prop="auxiliaryCost" label="医辅分摊成本">
          <template slot-scope="scope">
            {{ scope.row.auxiliaryCost | numberToCurrency }}
          </template>
        </el-table-column>
        <el-table-column prop="medicalTechnologyCost" label="医技分摊成本">
          <template slot-scope="scope">
            {{ scope.row.medicalTechnologyCost | numberToCurrency }}
          </template>
        </el-table-column>
        <el-table-column prop="totalCost" label="全成本">
          <template slot-scope="scope">
            {{ scope.row.totalCost | numberToCurrency }}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagenation-box">
        <Pagination
          :total="pageAttr.total"
          :page="pageAttr.currentPage"
          :page-size="pageAttr.pageSize"
          @pagation="pagationChange"
        />
      </div>
    </Container>
  </ContainerGroup>
</template>
<script>
import { listAmortizationDataWithAccount, download6 } from '@/utils/apis/report'
export default {
  name: 'TotalCost', // 医院各科室全成本表（会计分类汇总）
  data() {
    return {
      filterElements: [
        {
          key: 'yearMonth',
          label: '年/月',
          mode: 'monthrange',
          type: 'date-picker',
          format: 'yyyy-MM',
          value: [this.$util.currentDate(), this.$util.currentDate()],
          width: 340
        }
        // {
        //   key: "aihao",
        //   type: "Select",
        //   label: "院区",
        //   value: "",
        //   width: 210,
        //   options: [
        //     {
        //       label: "全部",
        //       value: "1",
        //     },
        //     {
        //       label: "浒关院区",
        //       value: "2",
        //     },
        //     {
        //       label: "三香院区",
        //       value: "3",
        //     },
        //   ],
        // },
      ],
      pageAttr: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      tableData: [],
      tableLoading: false,
      newParamList: {}
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleExport() { // 导出
      const fieldVal = this.$refs.filterForm.getParms()
      const startYearMonth = fieldVal?.yearMonth[0]
      const endYearMonth = fieldVal?.yearMonth[1]
      const currentYear = new Date(startYearMonth).getFullYear()
      const currentMonth = new Date(startYearMonth).getMonth() + 1

      const endcurrentYear = new Date(endYearMonth).getFullYear()
      const endcurrentMonth = new Date(endYearMonth).getMonth() + 1
      const param = {
        endYear: endcurrentYear,
        endMonth: endcurrentMonth,
        starMonth: currentMonth,
        starYear: currentYear,
        yard: '1'
      }
      download6(param).then(res => {
        const blob = new Blob([res.data], {
          type: res.data.type + 'charset=utf-8'
        })
        const downloadLink = document.createElement('a')
        const URL = window.URL || window.webkitURL || window.moxURL
        const downUrl = URL.createObjectURL(blob)
        downloadLink.href = downUrl
        downloadLink.download = '各科室直接成本表（按会计分类汇总）.xlsx'
        downloadLink.click()
        window.URL.revokeObjectURL(downUrl)
        // document.body.removeChild(downloadLink) // 删除 a 标签
      })
    },
    // 分页
    pagationChange(payload) {
      this.pageAttr.currentPage = payload.page
      this.pageAttr.pageSize = payload.pageSize
      this.getData(this.newParamList)
    },
    handleSearch(value) {
      this.newParamList = value
      this.pageAttr.currentPage = 1
      this.getData()
    },
    handleReset() {
      location.reload()
    },
    createNewData() {},
    getData() {
      // 列表
      const startYearMonth =
        this.newParamList.yearMonth && this.newParamList.yearMonth[0]
      const endYearMonth =
        this.newParamList.yearMonth && this.newParamList.yearMonth[1]
      const currentYear = new Date(startYearMonth).getFullYear()
      const currentMonth = new Date(startYearMonth).getMonth() + 1

      const endcurrentYear = new Date(endYearMonth).getFullYear()
      const endcurrentMonth = new Date(endYearMonth).getMonth() + 1
      const param = {
        endYear: endcurrentYear,
        endMonth: endcurrentMonth,
        starMonth: currentMonth,
        starYear: currentYear,
        pageNum: this.pageAttr.currentPage,
        pageSize: this.pageAttr.pageSize
      }
      if (currentYear !== endcurrentYear) {
        this.$message.warning('不能选择跨年时间段')
        return
      }
      this.tableLoading = true
      this.tableData = []
      listAmortizationDataWithAccount(param)
        .then((res) => {
          this.tableLoading = false
          if (res.data.code === 200) {
            this.tableData = res.data.data.list
            this.pageAttr.total = res.data.data.total
          } else {
            // this.$message.error(res.data.message);
          }
        })
    },
    formatNumber(n) {
      n = n.toString()
      return n[1] ? n : `0${n}`
    }
  }
}
</script>

<style lang="less" scoped>
.el-table--mini,
.el-table--small,
.el-table__expand-icon {
  font-size: 14px !important;
}

.ck-table-header {
  th {
    background: #fafafa !important;
    height: 48px;
    color: #555555 !important;
  }
}
.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}
.text-btn {
  color: #2165f9;
  border-bottom: 1px solid #2165f9;
  display: inline-block !important;
  cursor: pointer;
}
</style>
